<template>
	<view>
		<u-navbar :is-back="true" title="编辑内容" :border-bottom="false" :background="{backgroundColor: '#00a8ff'}">
		</u-navbar>
		<view class="bg">
			<view class="card">
				<u-cell-group :border="false">
					<u-cell-item title="选择标签" :value="lableValue" @click="show = true" :border-bottom="false">
					</u-cell-item>
				</u-cell-group>
			</view>
			<view class="card">
				<u-cell-group :border="false">
					<u-cell-item title="请输入标题" :arrow="false" :border-bottom="false"></u-cell-item>
					<u-input v-model="titleValue" placeholder="请输入标题" type="text" :border="false" />
				</u-cell-group>
			</view>
			<view class="card">
				<u-cell-group :border="false">
					<u-cell-item title="上传视频/图片" @click="open()" :arrow="false" :border-bottom="false"></u-cell-item>

					<u-upload ref="uUpload" :auto-upload="true" :action="action" @on-change="onChange"
						:file-list="fileList" :max-size="5 * 1024 * 1024" max-count="9"></u-upload>
				</u-cell-group>
			</view>
			<view class="card">
				<u-cell-group :border="false">
					<u-cell-item title="请输入文案" :arrow="false" :border-bottom="false"></u-cell-item>
					<u-input v-model="officeValue" placeholder="您可以分享项目体验 恢复过程 服务机构 环境等心得,对其他用户更有帮助呦 ~" :type="type"
						:border="false" />
				</u-cell-group>
			</view>
			<u-action-sheet :list="list" @click="click" v-model="show"></u-action-sheet>
		</view>
		<u-button type="primary" @click="fabu()" style="width: 90%;position: fixed;bottom: 60rpx;left: 5%;">发布
		</u-button>
	</view>
</template>
<script>
	import {
		ossAccessid,
		ossHost,
		ossSignature,
		ossPolicyBase64
	} from "@/common/ossUploadfile.js"
	export default {
		data() {
			return {
				list: [],
				show: false,
				index: '',
				action: 'http://zjmeifeng.oss-cn-beijing.aliyuncs.com',
				fileList: [],
				images: '',
				type: 'textarea',
				height: 100,
				autoHeight: true,
				// 选择标签
				lableValue: '去选择',
				// 标题
				titleValue: '',
				// 文案
				officeValue: '',
				// 发布科普入参数据
				cateList: [],
				src: '../../../../static/icon/my/gymf.png'
			}
		},
		onLoad() {
			// 获取科普列表标签
			this.$apiCoupe.cate().then((res) => {
				this.cateList = res.data.data;
				// 替换list.text
				for (var p in res.data.data) { //遍历json数组时，这么写p为索引，0,1
					console.log(res.data.data[p].title);
					let arr = {
						"text": res.data.data[p].title,
						"id": res.data.data[p].id
					}
					let listArray = eval(this.list);
					this.list.push(arr);
					console.log("listArray" + this.list[p].id)
				}
			}).catch((err) => {
				this.loading = false;
				console.log('request fail', err);
			});
		},
		methods: {
			onChange(res, index, lists, name, path) {
				// this.images1 = this.retOn(path);
				// console.log(path);
				// let str = '';
				// for (let key in path) {
				// 	str += path[key] + ",";
				// }
				// console.log(str);
				this.image = this.retOn(path);
				console.log(this.image);
			},
			
			retOn(path) {
				let str = "";
				for (let index in path) {
					str += path[index] + String.fromCharCode(44);
				}
				console.log("str前" + str)
				str = str.replace(/,$/gi, "");
				console.log(str);
				return str;
			},
			click(index) {
				this.index = index;
				console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`);
				this.lableValue = this.list[index].text;
			},
			open() {
				let selectArr = ["选择照片", "选择视频"]
				if (this.type == "0") {
					selectArr = ["选择照片"]
				} else if (this.type == "1") {
					return false
				}
				uni.showActionSheet({
					itemList: selectArr,
					success: res => {
						if (res.tapIndex == 0) {
							console.log("选择了照片");
						} else if (res.tapIndex == 1) {
							console.log("选择了视频");
						}
					}
				})
			},
			// 
			choose() {
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: function(res) {
						//	JSON.stringify(res.tempFilePaths) 图片路径
						console.log(JSON.stringify(res.tempFilePaths));
						// 点击拉取上传

						this.src = res.tempFilePaths[0];
						console.log("this.src: " + this.src);
						// 获取当前时间戳
						let timestamp = (new Date()).valueOf();
						console.log(timestamp);
						let nameStr = "test1/" + timestamp + "/" + res.tempFilePaths[0];
						console.log("nameStr:" + nameStr);
						console.log("res:" + res);
						uni.uploadFile({
							url: ossHost,
							filePath: res.tempFilePaths[0],
							fileType: "image",
							name: 'file',
							formData: {
								"key": nameStr,
								'OSSAccessKeyId': ossAccessid,
								'policy': ossPolicyBase64,
								'signature': ossSignature,
								'success_action_status': 200
							},
							header: {},
							success: obsRes => {
								// console.log( JSON.stringify(res.tempFilePaths)),
								uni.hideLoading()
								console.log(obsRes)
								if (obsRes.statusCode == 200) {
									// this.imageList.push(ossHost + nameStr)
									uni.showToast({
										title: "图片上传成功",
										duration: 800
									})
								} else {
									uni.showToast({
										title: "上传失败,请检查网络或服务器", // 
										icon: "none",
									})
								}
							},
							fail: err => {
								console.log("报错")
								uni.hideLoading()
								uni.showToast({
									title: "网络错误请检查," + JSON.stringify(err),
									icon: "none",
									duration: 4000
								})
							},
						});
					}
				});
				// 强制更新渲染


			},
			fabu() {
				console.log("执行发布操作");
				console.log("resous",this.image);
				const i = this.index;
				this.$apiCoupe.addcontent({
					type: '1',	// 类型
					title: this.titleValue,
					content: this.officeValue,
					resource: this.image,
					science_cate_id: this.list[i].id,
				}).then((res) => {
					console.log('request success', res)
				
					console.log("res.data.code:" + res.data.code);
					if(res.data.code==1){
						uni.showToast({
							title: res.data.msg,
							icon: 'success',
							mask: true
						});
						setTimeout(()=>{
							uni.navigateBack({
								
							})
						},2000)
					}
				}).catch((err) => {
					this.loading = false;
					console.log('request fail', err);
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		background-color: #f3f4f5;

		.card {
			padding: 0 26rpx 26rpx 26rpx;
			background-color: #FFFFFF;
		}
	}
</style>
